<template>
  <div class="cascaderInput">
    <a-cascader
      :options="cityList"
      v-bind="instance"
      @change="handleChange"
      v-model="cascaderValue"
      placeholder="请选择所在的区域"
      class="mr20"
      :allowClear="false"
    />
    <a-input
      placeholder="请输入详细地址"
      v-model="inputValue"
      @change="inputHandleChange"
    />
  </div>
</template>

<script>
import { cityList } from '../../../../MPlatformPortal/configs/cityList.js'

export default {
  props: {
    // 数据类型是object
    instance: Object
  },
  data() {
    return {
      inputValue: '',
      cascaderValue: [],
      defaultValue: undefined,
      selectOpt: {}, // 配置
      cityList
    }
  },
  watch: {
    instance: {
      handler(nVal) {
        Object.assign(this, { ...nVal }) // 把传入的参数，融合到this中
        console.log(this.defaultValue,'this.defaultValue');
        if (this.defaultValue) {
          this.cascaderValue = [this.defaultValue[0], this.defaultValue[1], this.defaultValue[2]]
          this.inputValue = this.defaultValue[3]
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleChange() {
      this.$emit('change', [...this.cascaderValue, this.inputValue])

    },
    inputHandleChange(){
      this.$emit('change', [...this.cascaderValue, this.inputValue])
      console.log(this.inputValue,', this.inputValue');
    }
  }
}
</script>
